<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="info">
            <view class="u-flex-1">
                <view class="dlzh">登录账号</view>
                <view class="name">{{info.account}}</view>
            </view>
            <view class="line">
                <view class="line-t">{{info.line}}</view>
                <view class="line-d">当前线路</view>
            </view>
        </view>
        
        <view v-if="identity == 4">
            <view class="f-box">
                <view class="f-o" @click="toPage(`/pages/my-create/my-create`)">
                    <view>
                        <view>我创建的订单</view>
                        <view class="f-see">查看详情</view>
                    </view>
                    <image src="../../static/icon/icon_03.png" class="icon-03"></image>
                </view>
                <view class="f-line"></view>
                <view class="f-o" @click="toPage(`/pages/cancel-order/cancel-order`)">
                    <view>
                        <view>审核取消订单</view>
                        <view class="f-see">查看详情</view>
                    </view>
                    <image src="../../static/icon/icon_04.png" class="icon-03"></image>
                </view>
            </view>
            <view class="f-box u-p-30">
                <view class="f-nav fhjl" @click="toPage(`/pages/send-records/send-records`)">
                    <image src="../../static/icon/icon_07.png" class="icon-07"></image>
                    <view>发货记录</view>
                </view>
                <view class="f-nav fyd" @click="toPage(`/pages/cost/cost`)">
                    <image src="../../static/icon/icon_05.png" class="icon-07"></image>
                    <view>费用单</view>
                </view>
                <view class="f-nav jsd" @click="toPage(`/pages/settlement-xh/settlement`)">
                    <image src="../../static/icon/icon_06.png" class="icon-07"></image>
                    <view>结算单</view>
                </view>
            </view>
        </view>
        
        <view v-if="identity == 5">
            <view class="ord-box">
                <view>订单管理</view>
            	<view class="wid" @click="toPage(`/pages/order/order?type=6`)">
                    <image src="../../static/icon/icon_09.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : info.unload > 9 }" v-if="info.unload > 0">
                        {{info.unload > 99 ? '99+' : info.unload}}
                    </view>
            		<view class="ord-t">待卸货</view>
            	</view>
            	<view class="wid" @click="toPage(`/pages/order/order?type=7`)">
            		<image src="../../static/icon/icon_10.png" mode=""></image>
            		<view class="ord-t">已完成</view>
            	</view>
                <view class="wid" @click="toPage(`/pages/abnormal/list`)">
                	<image src="../../static/icon/icon_11.png" mode=""></image>
					<view class="ord-num" :class="{'ord-num2' : info.abnormal > 9 }" v-if="info.abnormal > 0">
					    {{info.abnormal > 99 ? '99+' : info.abnormal}}
					</view>
                	<view class="ord-t">异常订单</view>
                </view>
            </view>
            
            <view class="f-box u-p-30">
                <view class="x-nav fyd" @click="toPage(`/pages/cost/cost`)">
                    <image src="../../static/icon/icon_05.png" class="icon-05"></image>
                    <view>费用单</view>
                </view>
                <view class="x-nav jsd" @click="toPage(`/pages/settlement-xh/settlement`)">
                    <image src="../../static/icon/icon_06.png" class="icon-05"></image>
                    <view>结算单</view>
                </view>
            </view>
        </view>
        
		<view class="d-nav">
		    <view class="d-nav-i" @click="toPage(`/pages/my-create/my-create`)">
				<image src="../../static/icon/xd.png" class="tc-icon"></image>
				<view class="u-flex-1">下单记录</view>
				<u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-15"></u-icon>
			</view>
			<view class="d-nav-i" @click="logOut">
				<image src="../../static/icon/tc.png" class="tc-icon"></image>
				<view class="u-flex-1">退出账号</view>
				<u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-15"></u-icon>
			</view>
		</view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
                identity: '',//4发货 5卸货
				info: {},
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
        },
        onShow() {
            // 身份
            if(this.$getTokens()){
                this.identity = this.$getSync('identity');
                this.tabbarInfo();
				this.getInfo()
            }
        },
        methods: {
			// 退出登录
			logOut() {
				this.$confirm('确定退出登录吗？',()=>{
				    uni.removeStorageSync('token')
					uni.removeStorageSync('userToken')
					uni.removeStorageSync('identity')
					uni.removeStorageSync('authority_car')
					uni.removeStorageSync('order_id_again')
                    
                    
					this.info = {}
					this.$gTo(`/pages/login/login`)
				})
			},
			
            toPage(url) {
                this.$gTo(url)
            },
			
			getInfo(){
			    this.$ajax('user_detail', {
			        user_token: this.$getTokens(),
			    }).then(ret => {
			    	if (ret.success == 1000) {
			            if(ret.detail){
			                this.info = ret.detail
			            }else{
			                this.$toast(ret.msg);
			            }
			    	} else {
			    		this.$toast(ret.msg);
			    	}
			    });
			},
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 发货
                if (this.$getSync('identity') == 4) {
                    if(this.$getSync('authority_car') == 1){
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_03.png",
                                selectedIconPath: "/static/icon/tab_04.png",
                                text: '找车',
                                pagePath: "/pages/tabbar/tab-2"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }else{
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }
                }
                // 卸货
                if(this.$getSync('identity') == 5){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_11.png",
                            selectedIconPath: "/static/icon/tab_12.png",
                            text: '扫码卸车',
                            pagePath: "/pages/tabbar/tab-2"
                        },{
                            iconPath: "/static/icon/tab_09.png",
                            selectedIconPath: "/static/icon/tab_10.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
	.d-nav{
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.d-nav-i{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.d-nav-i:last-child{
		border-bottom: none;
	}
    
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 500rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .info{
        padding: 0 15rpx 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .dlzh{
        font-size: 26rpx;
        color: #61a5e8;
    }
    .name{
        font-size: 48rpx;
        color: #fff;
        word-break: break-all;
        white-space: pre-line;
    }
    .line{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #3d8efe;
        padding: 2rpx;
        border-radius: 15rpx;
        overflow: hidden;
    }
    .line-t{
        background-color: #fff;
        padding: 8rpx 20rpx;
        font-size: 26rpx;
        color: #3d8efe;
        font-weight: bold;
    }
    .line-d{
        font-size: 22rpx;
        color: #fff;
    }
    
    .f-box{
        padding: 50rpx 35rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 15rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .f-o{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
    }
    .f-see{
        font-size: 24rpx;
        color: #848484;
        font-weight: normal;
    }
    .icon-03{
        width: 88rpx;
        height: 88rpx;
        margin-left: 20rpx;
    }
    .f-line{
        width: 2rpx;
        height: 82rpx;
        background-color: #d0d0d0;
        margin: 0 27rpx;
    }
    .f-nav{
        width: 200rpx;
        height: 210rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
    }
    
    
    .icon-07{
        width: 65rpx;
        height: 65rpx;
        margin-bottom: 14rpx;
    }
    .fhjl{
        background-color: #ffefed;
    }
    .fyd{
        background-color: #fff8f0;
    }
    .jsd{
        background-color: #e8f4ff;
    }
    .tc-icon{
        width: 36rpx;
        height: 37rpx;
        margin-right: 25rpx;
    }
    
    
    // 卸货端
    .ord-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 55rpx;
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .wid {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        
    	image {
    		width: 46rpx;
    		height: 46rpx;
    		margin-bottom: 10rpx;
    	}
        
        .ord-num{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 5rpx 8rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
        .ord-num2{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 6rpx 4.5rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    	.ord-t {
    		font-size: 25rpx;
    	}
    }
    .x-nav{
        width: calc(615rpx / 2);
        height: 140rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
    }
    .icon-05{
        width: 65rpx;
        height: 65rpx;
        margin-right: 15rpx;
    }
    

</style>
